@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-calendar";
@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";

$sizes: 's', 'm', 'l';

$typography: (
  's': $sans-label-s,
  'm': $sans-label-m,
  'l': $sans-label-l,
);

.button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  color: simple-var($sys-neutral-text-main);

  background: none;
  border: none;

  &:not(:disabled) {
    cursor: pointer;

    &:hover,
    &:focus-visible {
      background-color: color-with-opacity($sys-neutral-accent-default, $opacity-a008);
    }

    &:focus-visible {
      @include outline-inside-var($container-focused-s);

      outline-color: simple-var($sys-available-complementary);
    }
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($calendar, 'button', $size);
      @include composite-var($typography, $size);
    }
  }
}

.icon {
  display: inline-flex;
  color: $sys-neutral-text-light;
}
